<template>
  <div class="home">
    <a-carousel class="banner-carousel" autoplay>
      <div v-for="(item, index) in bannerList" :key="index">
        <img :src="item.image" class="banner-img" />
      </div>
    </a-carousel>
    <div class="new-balck2 ptb60">
      <div class="rateWrapper">
        <div class="wt1200 mauto flex jscenter">
          <template v-for="(item, index) in stockList">
            <div class="plr10 markethover ptb15 new-balck3 w23" v-if="index <= 5" :key="index">
              <div class="flex alcenter between w100">
                <div class="ft20 flex white alcenter">
                  <img
                    :src="item.logo || defaultStockIcon"
                    alt=""
                    srcset=""
                    class="wt30 radius50p mlr10 rateIcon"
                  />
                  <span>{{ item.name }}</span>
                </div>
              </div>
              <div class="c-pd">
                <div class="pl5 ft16 white pt10 ml10 mb10">USD {{ item.price }}</div>
              </div>
              <div class="flex jsend flexend w100">
                <span
                  :class="['ft14 white radius8 plr10 ptb5', item.priceflu > 0 ? 'green' : 'red']"
                  >{{ item.priceflu }}%</span
                >
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="new-balck2">
      <div class="wt1200 mauto">
        <div class="flex ht30 alcenter white marketRackHeaders">
          <div class="flex1 tc ft16" v-for="item in tableColumn" :key="item.dataIndex">
            {{ item.title }}
          </div>
          <div class="flex1"></div>
        </div>
        <div
          class="flex pb20 white hover-item marketRack"
          v-for="(item, index) in stockList"
          :key="index"
        >
          <!-- <div class="flex1 tc ft16">{{ index }}</div> -->
          <div class="flex1 tc ft16 flex jscenter alcenter">
            <img :src="item.logo || defaultStockIcon" class="wt30 radius50p mlr10" />
            <span>{{ item.name }}</span>
          </div>
          <div class="flex1 tc ft16">{{ item.price }}</div>
          <div class="flex1 tc ft16">
            <span :class="item.priceflu > 0 ? 'green' : 'red'">{{ item.priceflu }}%</span>
          </div>
          <div class="flex1 tc">
            <LineCharts
              class="wt120 ht20 mauto"
              :id="'main' + item.code + index"
              :chart-data.sync="item.dayKlines"
              :color="item.priceflu < 0 ? '#e0636b' : '#42c18c'"
            ></LineCharts>
            <!-- <div id="chart0" class="wt120 ht20 mauto">{{ item.openPrice }}</div> -->
          </div>
          <div class="flex1 tc">
            <span class="new-trade-btn pointer" @click="routerHandler(item)">
              {{ $t('Trade') }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="new-balck2">
      <div class="wt1300 mauto flex alcenter ptb40">
        <img src="../assets/images/image@2x.ddde5f3.png" class="w60" style="height: 430px" />
        <div class="white">
          <div class="ft40 bold">{{ $t('Why choose FX Gold Options') }}?</div>
          <div class="mt20">
            <div class="flex alcenter">
              <img
                src=""
                alt=""
                class="wt30 mr10"
              />
              <span class="ft22">{{ $t('TOP RELIABILITY') }}</span>
            </div>
            <div class="aboutText">{{ $t('Options-growing') }}</div>
          </div>
          <div class="mt20">
            <div class="flex alcenter">
              <img
                src=""
                alt=""
                class="wt30 mr10"
              />
              <span class="ft22">{{ $t('SECURITY') }}</span>
            </div>
            <div class="aboutText">{{ $t('dedicated server') }}</div>
          </div>
          <div class="mt20">
            <div class="flex alcenter">
              <img
                src=""
                alt=""
                class="wt30 mr10"
              />
              <span class="ft22">{{ $t('POPULARITY') }}</span>
            </div>
            <div class="aboutText">{{ $t('marketing activities') }}</div>
          </div>
          <div class="mt20">
            <div class="flex alcenter">
              <img
                src=""
                alt=""
                class="wt30 mr10"
              />
              <span class="ft22">{{ $t('LONG-TERM PARTNERSHIP') }}</span>
            </div>
            <div class="aboutText">{{ $t('project technically') }}</div>
          </div>
          <div class="mt20">
            <div class="flex alcenter">
              <img
                src=""
                alt=""
                class="wt30 mr10"
              />
              <span class="ft22">{{ $t('SAFETY AND CARE FROM US') }}</span>
            </div>
            <div class="aboutText">{{ $t('project development') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="new-balck2 ptb40">
      <div class="wt1300 mauto flex alcenter pb20">
        <div class="white mr40">
          <div class="ft40 bold">{{ $t('Listing on our exchange will help your project') }}</div>
          <div class="flex alcenter mt20">
            <img
              src=""
              alt=""
              class="wt30 mr10"
            />
            <span class="ft22">{{ $t('Raise a buzz around the project') }}</span>
          </div>
          <div class="flex alcenter mt20">
            <img
              src=""
              alt=""
              class="wt30 mr10"
            />
            <span class="ft22">{{ $t('Increase the liquidity of your token') }}</span>
          </div>
          <div class="flex alcenter mt20">
            <img
              src=""
              alt=""
              class="wt30 mr10"
            />
            <span class="ft22">{{ $t('Grow your community') }}</span>
          </div>
          <div class="flex alcenter mt20">
            <img
              src=""
              alt=""
              class="wt30 mr10"
            />
            <span class="ft22">{{ $t('Gain Trading volume') }}</span>
          </div>
          <div class="mt20">
            <span>
              <img
                src=""
                class="wt120 mr10 el-popover__reference"
                aria-describedby="el-popover-5162"
                tabindex="0"
                style="height: 40px"
            /></span>
            <span>
              <img
                src=""
                class="wt120 mr10 el-popover__reference"
                aria-describedby="el-popover-8331"
                tabindex="0"
                style="height: 40px"
            /></span>
          </div>
        </div>
        <img src="../assets/images/phone-i.c455579.png" alt="" class="w50" style="height: 530px" />
      </div>
    </div>
    <div class="new-balck3 white ptb30">
      <div class="tc ft40">{{ $t('Additional Activities') }}</div>
      <div class="tc railTagged mtb30">
        {{ $t('What other things FX Gold Options will offer and keep you engaged') }}
      </div>
      <div class="flex alcenter jscenter">
        <div class="wt340 flex column alcenter">
          <img src="../assets/images/qiqiu.7b32116.png" style="height: 140px" />
          <div class="railTag">1</div>
          <div class="railHead">{{ $t('AIRDROP PROMOTION') }}</div>
          <div class="railText">
            {{ $t('Allow users to diversify their cryptocurrency holdings') }}
          </div>
        </div>
        <div class="wt340 flex column alcenter">
          <img src="../assets/images/flower.99c65c7.png" style="height: 140px" />
          <div class="railTag">2</div>
          <div class="railHead">{{ $t('Cloud mining') }}</div>
          <div class="railText">{{ $t('staked token amount') }}</div>
        </div>
        <div class="wt340 flex column alcenter">
          <img src="../assets/images/yiyi.7565fd1.png" style="height: 140px" />
          <div class="railTag">3</div>
          <div class="railHead">{{ $t('TRADING COMPETITION') }}</div>
          <div class="railText">{{ $t('Provides organic trading volume of your coin') }}</div>
        </div>
      </div>
    </div>
    <div class="new-balck2 ptb40 flex column jscenter alcenter">
      <div class="wt1300 white flex alcenter">
        <div class="flex1">
          <div class="ft40">{{ $t('Distribution') }}</div>
          <div class="customerTag mtb20">
            {{ $t('We make money by managing client accounts in return for fees') }}
          </div>
          <div class="customerText">{{ $t('Customer Channel') }}</div>
        </div>
        <div class="flex1 testimonialCard ml90">
          <div class="testimonialText">{{ $t('Existing Relationships') }}</div>
          <div class="testimindesc">{{ $t('Monitoring our progress and providing feedback') }}</div>
          <div class="testimonialText">{{ $t('Trusted and Incentivised Intermediaries') }}</div>
          <div class="testimindesc">
            {{ $t('Worked with key members of our team for decades') }}
          </div>
          <div class="testimonialText">{{ $t('Proprietary Database') }}</div>
          <div class="testimindesc">{{ $t('Warm and lukewarm leads') }}</div>
          <div class="testimonialText">{{ $t('Established HNW Platforms') }}</div>
          <div class="testimindesc">{{ $t('eg') }}</div>
        </div>
      </div>
      <div class="wt1300 white flex alcenter between flexend mt40">
        <div>
          <div class="ft40">{{ $t('multi platform') }}</div>
          <div class="customerTag mt20">{{ $t('business functions') }}</div>
        </div>
        <!-- <div class="accountActionBtn pointer">{{ $t('Create Account') }}</div> -->
      </div>
    </div>
    <div class="new-balck3 white ptb30">
      <div class="flex alcenter jscenter">
        <img src="../assets/images/pz.deef1e1.jpg" alt="" class="w40" style="height: auto" />
      </div>
    </div>
    <!-- <customService :token="userInfo.token" :userId="userInfo.id" /> -->
  </div>
</template>

<script>
import websocket from '@/utils/websocket'
import { getStockInfo } from '@/api/stock'
import { mapActions } from 'vuex'
import LineCharts from '@/components/LineCharts.vue'
// import customService from '@/components/customer-service/index'
import { ACCESS_TOKEN } from '@/utils/constants'
import storage from 'store'
export default {
  components: {
    LineCharts
    // customService
  },
  data() {
    return {
      bannerList: [
        { image: require('@/assets/images/banner1.png') },
        { image: require('@/assets/images/banner2.png') },
        { image: require('@/assets/images/banner3.png') },
        { image: require('@/assets/images/banner4.png') },
        { image: require('@/assets/images/banner5.png') }
      ],
      tableColumn: [
        // {
        //   title: '#',
        //   dataIndex: 'pair'
        // },
        {
          title: this.$t('Currency'),
          dataIndex: 'Currency'
        },
        {
          title: this.$t('Price'),
          dataIndex: 'Price'
        },
        {
          title: this.$t('Increase'),
          dataIndex: 'Increase'
        },
        {
          title: this.$t('Quotes'),
          dataIndex: 'Quotes'
        }
      ],
      tableData: [],
      stockList: [],
      userInfo: {},
      defaultStockIcon: require('@/assets/iclogo.png')
    }
  },
  mounted() {
    this.loadData()
    // setTimeout(() => {
    //   this.loadData()
    // }, 1000)
    this.GetUserInfo().then((res) => {
      res.token = storage.get(ACCESS_TOKEN)
      this.userInfo = res
    })
  },
  methods: {
    ...mapActions(['GetUserInfo']),
    loadData() {
      getStockInfo().then((resp) => {
        new websocket(function (data) {
          // console.log(data, 'websocket');
          resp.data.forEach((item) => {
            if (data.code == item.code) {
              item.dayKlines = data.dayKlines
              item.price = data.price
              item.priceflu = data.priceflu
            }
          })
          // console.log(stockFun,this.stockList, 'stockFun')
        })
        this.stockList = []
        this.stockList = resp.data
      })
    },
    routerHandler(item) {
      this.$router.push({
        name: 'CurrencyTransaction',
        query: {
          code: item.code,
          name: item.name
          // currency: item.currency
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-carousel {
  width: 100%;
  height: 620px;
}
.banner-img {
  width: 100%;
  height: 620px;
}
.ptb60 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.rateWrapper {
  width: 95%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 20px;
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 20px;
}
.markethover {
  border-radius: 10px;
  margin-right: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  cursor: pointer;
}
.c-pd {
  padding: 8px 0 5px;
}
.rateIcon {
  height: 30px;
}
.marketRack,
.marketRackHeaders {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.marketRackHeaders {
  margin-bottom: 10px;
  padding-bottom: 20px;
  border-bottom: 3px solid hsla(0, 0%, 78.4%, 0.5);
}
.marketRack {
  padding: 20px 0;
  border-bottom: 1px solid hsla(0, 0%, 78.4%, 0.2);
}
.new-trade-btn {
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 5px 10px;
}
.railTag {
  font-size: 12px;
  color: grey;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: Lato;
  text-transform: uppercase;
}
.railHead {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.railText {
  font-size: 15px;
  text-align: center;
  color: #c8c8c8;
}
.testimonialCard {
  background: #1e1e23;
  padding: 40px;
  border-radius: 15px;
  margin-right: 50px;
  border-left: 15px solid #ffc800;
}
.customerTag {
  font-size: 18px;
  font-weight: 600;
  color: #c8c8c8;
  margin-bottom: 10px;
}
.customerText {
  font-size: 15px;
  font-weight: 300;
  color: #b4b4b4;
  margin-bottom: 30px;
}

.new-balck3 {
  background-color: #0f0f14;
}
</style>
